<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>区域选择</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            cursor: crosshair;
            background: transparent;
            position: relative;
        }
        
        #screen-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            opacity: 0.7;
            user-select: none;
            pointer-events: none;
        }
        
        #overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            pointer-events: none;
        }
        
        #selection-box {
            position: absolute;
            border: 2px solid #4A90E2;
            background: rgba(74, 144, 226, 0.1);
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
            pointer-events: none;
            display: none;
        }
        
        #selection-info {
            position: absolute;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 12px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            pointer-events: none;
            display: none;
            z-index: 1000;
        }
        
        #hint {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 20px 40px;
            border-radius: 8px;
            font-size: 16px;
            text-align: center;
            pointer-events: none;
            z-index: 1001;
        }
        
        #hint.hidden {
            display: none;
        }
    </style>
</head>
<body>
    <img id="screen-background" alt="Screen">
    <div id="overlay"></div>
    <div id="selection-box"></div>
    <div id="selection-info"></div>
    <div id="hint">按住鼠标左键拖拽选择区域，按 ESC 取消</div>
    
    <script>
        // 屏幕数据变量
        let screenDataUrl = null;
        let screenWidth = 1920;
        let screenHeight = 1080;
        let displayWidth = window.innerWidth;
        let displayHeight = window.innerHeight;
        let scaleX = 1;
        let scaleY = 1;
        
        // 监听初始化数据
        if (window.electronAPI && window.electronAPI.onRegionSelectInit) {
            window.electronAPI.onRegionSelectInit((data) => {
                screenDataUrl = data.screenDataUrl;
                screenWidth = data.screenWidth || 1920;
                screenHeight = data.screenHeight || 1080;
                displayWidth = data.displayWidth || window.innerWidth;
                displayHeight = data.displayHeight || window.innerHeight;
                
                // 计算缩放比例
                scaleX = displayWidth / screenWidth;
                scaleY = displayHeight / screenHeight;
                
                // 设置背景图片
                const screenBackground = document.getElementById('screen-background');
                if (screenDataUrl) {
                    screenBackground.src = screenDataUrl;
                }
            });
        }
        
        // 选择区域相关变量
        let isSelecting = false;
        let startX = 0;
        let startY = 0;
        let currentX = 0;
        let currentY = 0;
        
        const selectionBox = document.getElementById('selection-box');
        const selectionInfo = document.getElementById('selection-info');
        const hint = document.getElementById('hint');
        
        // 更新选择框
        function updateSelectionBox() {
            if (!isSelecting) {
                selectionBox.style.display = 'none';
                selectionInfo.style.display = 'none';
                return;
            }
            
            const left = Math.min(startX, currentX);
            const top = Math.min(startY, currentY);
            const width = Math.abs(currentX - startX);
            const height = Math.abs(currentY - startY);
            
            if (width > 0 && height > 0) {
                selectionBox.style.display = 'block';
                selectionBox.style.left = left + 'px';
                selectionBox.style.top = top + 'px';
                selectionBox.style.width = width + 'px';
                selectionBox.style.height = height + 'px';
                
                // 更新信息显示
                const realWidth = Math.round(width / scaleX);
                const realHeight = Math.round(height / scaleX);
                selectionInfo.style.display = 'block';
                selectionInfo.style.left = (left + 10) + 'px';
                selectionInfo.style.top = (top - 30) + 'px';
                selectionInfo.textContent = `${realWidth} × ${realHeight} px`;
            } else {
                selectionBox.style.display = 'none';
                selectionInfo.style.display = 'none';
            }
        }
        
        // 将屏幕坐标转换为实际坐标
        function screenToReal(x, y) {
            return {
                x: Math.round(x / scaleX),
                y: Math.round(y / scaleX)
            };
        }
        
        // 鼠标按下
        document.addEventListener('mousedown', (e) => {
            if (e.button === 0) { // 左键
                isSelecting = true;
                startX = e.clientX;
                startY = e.clientY;
                currentX = e.clientX;
                currentY = e.clientY;
                hint.classList.add('hidden');
                updateSelectionBox();
            }
        });
        
        // 鼠标移动
        document.addEventListener('mousemove', (e) => {
            if (isSelecting) {
                currentX = e.clientX;
                currentY = e.clientY;
                updateSelectionBox();
            }
        });
        
        // 鼠标释放
        document.addEventListener('mouseup', async (e) => {
            if (e.button === 0 && isSelecting) {
                isSelecting = false;
                
                const left = Math.min(startX, currentX);
                const top = Math.min(startY, currentY);
                const width = Math.abs(currentX - startX);
                const height = Math.abs(currentY - startY);
                
                if (width > 10 && height > 10) { // 最小选择区域
                    // 转换为实际坐标
                    const realStart = screenToReal(left, top);
                    const realWidth = Math.round(width / scaleX);
                    const realHeight = Math.round(height / scaleX);
                    
                    // 发送完成选择事件
                    const region = {
                        x: realStart.x,
                        y: realStart.y,
                        width: realWidth,
                        height: realHeight
                    };
                    
                    if (window.electronAPI && window.electronAPI.completeRegionSelect) {
                        const result = await window.electronAPI.completeRegionSelect(region);
                        // 结果会通过主进程返回给主窗口
                    }
                } else {
                    // 选择区域太小，重新显示提示
                    hint.classList.remove('hidden');
                    selectionBox.style.display = 'none';
                    selectionInfo.style.display = 'none';
                }
            }
        });
        
        // ESC 键取消
        document.addEventListener('keydown', async (e) => {
            if (e.key === 'Escape') {
                if (window.electronAPI && window.electronAPI.cancelRegionSelect) {
                    await window.electronAPI.cancelRegionSelect();
                }
            }
        });
        
        // 防止右键菜单
        document.addEventListener('contextmenu', (e) => {
            e.preventDefault();
        });
        
        // 3秒后隐藏提示
        setTimeout(() => {
            hint.classList.add('hidden');
        }, 3000);
    </script>
</body>
</html>

